<template>
  <div class="examineDetail">
    <div class="common-details mx-1">
      <customDetailsTopbar title="年度重点工作审核详情" :show-close="false" flag @back="back" />
      <div class="bg-white px-1 d-scroll ">
        <customTitle :is-line="true" bg-color="#3795ff" title="基本信息" />
        <div class="audit-desc-container">
          <div v-for="(item, index) in descList" :key="index">
            <div>
              <custom-details-item :icon="item.icon" :label="item.label">
                <template #valueSlot>
                  <span v-if="item.label !== '附件'">{{ item.value }}{{ item.label === '所属年份' ? '年' :'' }}</span>
                  <div v-else>
                    <el-link v-if="item.value !== '/'" type="primary" class="desContent" @click="handleDownLoad(item.uuid)">
                      {{ item.value }}
                    </el-link>
                    <span v-else>暂无</span>
                  </div>
                </template>
              </custom-details-item>
            </div>
          </div>
          <el-alert :title="`本年度重点工作共有${desc.contentNum}项，其中集团下发${desc.jtNum}项（已认领${desc.claimNum}项，不涉及${desc.jtIsInvolveNum}项），企业自制定${desc.qyNum}项。`" type="warning" class="mb-1" :closable="false" />
        </div>
        <customTitle :is-line="true" bg-color="#3795ff" title="企业认领工作内容" />
        <div class="listInner audit-list-container">
          <div class="common_list">
            <div v-for="(item, index) in listData" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    {{ item.workContent || '/' }}
                  </div>
                  <ul>
                    <li>
                      <i class="iconfont c-text-color1">&#xe6a2;</i>
                      <div class="label">完成期限：</div>
                      <div class="value">{{ item.workType || '/' }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color2">&#xe87e;</i>
                      <div class="label">工作来源：</div>
                      <div class="value">{{ item.sendType || '/' }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color3">&#xe6a2;</i>
                      <div class="label">企业认领情况：</div>
                      <div class="value">{{ item.claimStatus || '/' }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color4">&#xe62c;</i>
                      <div class="label">不涉及原因：</div>
                      <div class="value allowWrap">{{ item.notInvolveDesc || '/' }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <customLoadmore ref="customLoadmore" :page-num="formInline.pageNum" :pages="pages" @load="handlePages" />
        </div>
        <div class="audit-info-container" :style="{paddingBottom:'1.5rem'}">
          <template v-if="status === '审核通过' || status === '退回'">
            <customTitle :is-line="true" bg-color="#3795ff" title="审核信息" />
            <div>
              <custom-details-item label="审核结果" icon="&#xe6a2;" :value="auditInfo.status" />
              <custom-details-item label="审核说明" icon="&#xe6a2;" :value="auditInfo.auditDesc" />
              <custom-details-item label="审核人员" icon="&#xe6a2;" :value="auditInfo.auditUser" />
              <custom-details-item label="审核时间" icon="&#xe6a2;" :value="auditInfo.auditTime" />
            </div>
          </template>
        </div>
      </div>
    </div>
    <div v-if="logLoadingStatus" class="bottom-box d-flex justify-content-center align-items-center" :style="{'z-index':3000}">
      <van-button v-if="status === '待审核'" plain type="warning" size="small" class="mr-2" @click="auditComponentShow = true">审核</van-button>
      <van-button plain type="info" size="small" @click="flowComponentShow = true">流程监控</van-button>
    </div>
    <!-- 审核 -->
    <van-popup
      v-model="auditComponentShow"
      get-container="body"
      position="right"
      :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      lock-scroll
      safe-area-inset-bottom
      close-on-popstate
      class="custom-van-pop"
    >
      <div class="pop-title">审核</div>
      <div class="pop-vertical-flex">
        <div class="pop-content" style="background-color: white">
          <auditComponent v-if="auditComponentShow" v-model="auditComponentShow" @back="back" />
        </div>
      </div>
    </van-popup>
    <!-- 流程监控 -->
    <van-popup
      v-model="flowComponentShow"
      get-container="body"
      position="right"
      :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      lock-scroll
      safe-area-inset-bottom
      close-on-popstate
      class="custom-van-pop"
    >
      <div class="pop-title">流程监控</div>
      <div class="pop-vertical-flex">
        <div class="pop-content" style="background-color: white">
          <processMonitorIngTimeline v-if="flowComponentShow" v-model="flowComponentShow" :list-data-prop="disposeList" :details-data-prop="disposeData" />
        </div>
      </div>
    </van-popup>

  </div>
</template>
<script>
import customLoadmore from '@/components/common/custom-loadmore.vue'
import processMonitorIngTimeline from '@/components/common/processMonitorIngTimeline.vue'
import auditComponent from './auditComponent.vue'
import {
  HbYearWorkWorkRecordAuditDesc,
  HbYearWorkWorkRecordAuditList,
  hb_recordListByWorkCompanyId,
  hb_yearWorkCompanyLog,
  NyYearWorkWorkRecordAuditDesc,
  NyYearWorkWorkRecordAuditList,
  ny_recordListByWorkCompanyId,
  ny_yearWorkCompanyLog,
  TpfYearWorkWorkRecordAuditDesc,
  TpfYearWorkWorkRecordAuditList,
  tpf_recordListByWorkCompanyId,
  tpf_yearWorkCompanyLog,
  XfYearWorkWorkRecordAuditDesc,
  XfYearWorkWorkRecordAuditList,
  xf_recordListByWorkCompanyId,
  xf_yearWorkCompanyLog,
  yearWorkWorkRecordAuditDesc,
  yearWorkWorkRecordAuditList,
  aq_recordListByWorkCompanyId,
  aq_yearWorkCompanyLog
} from '@/api/commonPage/AnnualWork'

export default {
  name: 'ExamineDetail',
  components: { customLoadmore, processMonitorIngTimeline, auditComponent },
  inject: ['layout'],
  data() {
    return {
      auditComponentShow: false,
      flowComponentShow: false,
      logLoadingStatus: false,
      descList: [
        { label: '所属年份', value: '/', fieldName: 'dataYear', icon: '&#xe8d5;' },
        { label: '企业名称', value: '/', fieldName: 'companyName', icon: '&#xe62c;' },
        { label: '任务状态', value: '/', fieldName: 'status', icon: '&#xe685;' }
      ],
      listData: [],
      formInline: {
        pageNum: 1,
        pageSize: 10
      },
      pages: 0,
      desc: {},
      auditInfo: {},
      status: '',
      api: {
        安全生产: {
          yearWorkWorkRecordAuditDesc: yearWorkWorkRecordAuditDesc,
          yearWorkWorkRecordAuditList: yearWorkWorkRecordAuditList,
          recordListByWorkCompanyId: aq_recordListByWorkCompanyId,
          log: aq_yearWorkCompanyLog

        },
        碳排放管理: {
          yearWorkWorkRecordAuditDesc: TpfYearWorkWorkRecordAuditDesc,
          yearWorkWorkRecordAuditList: TpfYearWorkWorkRecordAuditList,
          recordListByWorkCompanyId: tpf_recordListByWorkCompanyId,
          log: tpf_yearWorkCompanyLog
        },
        环保管理: {
          yearWorkWorkRecordAuditDesc: HbYearWorkWorkRecordAuditDesc,
          yearWorkWorkRecordAuditList: HbYearWorkWorkRecordAuditList,
          recordListByWorkCompanyId: hb_recordListByWorkCompanyId,
          log: hb_yearWorkCompanyLog
        },
        能源管理: {
          yearWorkWorkRecordAuditDesc: NyYearWorkWorkRecordAuditDesc,
          yearWorkWorkRecordAuditList: NyYearWorkWorkRecordAuditList,
          recordListByWorkCompanyId: ny_recordListByWorkCompanyId,
          log: ny_yearWorkCompanyLog
        },
        消防管理: {
          yearWorkWorkRecordAuditDesc: XfYearWorkWorkRecordAuditDesc,
          yearWorkWorkRecordAuditList: XfYearWorkWorkRecordAuditList,
          recordListByWorkCompanyId: xf_recordListByWorkCompanyId,
          log: xf_yearWorkCompanyLog
        }
      },
      disposeList: [],
      disposeData: {
        '下发年度重点工作': [
          {
            itemName: '下发人',
            valueName: 'operatePerson'
          }
        ],
        '提交企业认领工作内容': [
          {
            itemName: '企业名称',
            valueName: 'companyName'
          },
          {
            itemName: '提交人',
            valueName: 'operatePerson'
          }
        ],
        '审核企业认领工作内容': [
          {
            itemName: '审核结果',
            valueName: 'status'
          },
          {
            itemName: '审核说明',
            valueName: 'auditDesc'
          },
          {
            itemName: '审核人',
            valueName: 'operatePerson'
          }
        ],
        '提交工作完成情况': [
          {
            itemName: '企业名称',
            valueName: 'companyName'
          },
          {
            itemName: '提交人',
            valueName: 'operatePerson'
          }
        ]
      }
    }
  },
  mounted() {
    const item = JSON.parse(this.$route.query.item)
    this.descList.forEach((v) => {
      v.value = item[v.fieldName] ? item[v.fieldName] : v.value
    })
    this.status = item.status
    this.yearWorkWorkRecordAuditDesc()
    this.recordListByWorkCompanyId()
    this.yearWorkWorkRecordAuditList()
    this.yearWorkCompanyLog().then((res) => {
      this.logLoadingStatus = true
    })
  },
  methods: {
    back() {
      this.$router.replace({
        path: '/staging/AnnualWorkDetails',
        query: {
          current: this.$route.query.current,
          active: this.$route.query.active,
          workId: this.$route.query.workId
        }
      })
    },
    handlePages(value) {
      this.formInline.pageNum = value
      this.recordListByWorkCompanyId()
    },
    // 描述请求
    async yearWorkWorkRecordAuditDesc() {
      this.layout.showAreaLoading(['.audit-desc-container'])
      const { status, data } = await this.api[this.$route.query.current]['yearWorkWorkRecordAuditDesc']({
        companyId: this.$route.query.companyId,
        workId: this.$route.query.id
      })
      if (data && status === 0) {
        this.desc = data
      }
      this.layout.hideAreaLoading(['.audit-desc-container'])
    },
    // 列表请求
    async recordListByWorkCompanyId() {
      this.layout.showAreaLoading(['.audit-list-container'])
      this.$refs.customLoadmore.loadStatus = true
      const { status, data } = await this.api[this.$route.query.current]['recordListByWorkCompanyId']({
        ...this.formInline,
        companyId: this.$route.query.companyId,
        workId: this.$route.query.id
      })
      if (data && status === 0) {
        this.total = data.total
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      this.layout.hideAreaLoading(['.audit-list-container'])
    },
    // 审核信息请求
    async yearWorkWorkRecordAuditList() {
      this.layout.showAreaLoading(['.audit-info-container'])
      const { status, data } = await this.api[this.$route.query.current]['yearWorkWorkRecordAuditList']({
        companyId: this.$route.query.companyId,
        workId: this.$route.query.id
      })
      if (data && status === 0) {
        this.auditInfo = data
      }
      this.layout.hideAreaLoading(['.audit-info-container'])
    },
    // 流程监控数据
    async yearWorkCompanyLog() {
      const { status, data } = await this.api[this.$route.query.current]['log']({
        companyId: this.$route.query.companyId,
        workId: this.$route.query.id
      })
      if (status === 0 && data) {
        this.disposeList = data
      }
    }
  }
}
</script>

<style lang="scss">
</style>
<style lang="scss" scoped>
.bottom-box{
  position: fixed;
  bottom: 1px;
  left: 0;
  right: 0;
  min-height: 100px;
  background-color: rgba(255, 255, 255,0.9);
  box-shadow: 0px -8px 8px rgba(0,0,0,0.4);
}
.custom-van-pop {
  background: url("~@/assets/images/wapper.png") no-repeat;
  overflow: hidden;

  .pop-title {
    color: #fff;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.46667rem;
    font-weight: bold;

    .icon-box {
      position: absolute;
      right: .5rem;
      top: 0;

      .iconfont.active {
        color: blue;
      }
    }
  }

  .pop-content {
    // background-color: #fff;
    margin: 0 0.25rem;
    padding: 0rem !important;
  }

  ::v-deep .van-popup__close-icon {
    color: #fff;
  }
}
</style>
